<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div class="wb-is-post-event" :style="item.styles" @click.stop="onChangeAttr">
        <van-checkbox v-if="!commonAttr.checkboxSelectedUrl" v-model="isChecked"
          :checked-color="commonAttr.backgroundColor" shape="square" ref="checkbox">{{commonAttr.text}}</van-checkbox>
        <van-checkbox v-else v-model="isChecked"
          :checked-color="commonAttr.backgroundColor" shape="square" ref="checkbox">
          {{commonAttr.text}}
          <template #icon="props">
            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
          </template>
        </van-checkbox>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { getCompIdByParam } from '@/plugins/utils'
import { CONTROL_TYPES } from '@/common/const-wb'
import { ref } from 'vue'
import { getPxOVwByValue } from '@/store/utils'

export default {
  name: "WbIcon",
  mixins: [utils],
  components: {
    InjectTemplate
  },
  setup () {
    const isChecked = ref(true);
    return { isChecked };
  },
  mounted() {
    if (!this.isH5Edit) {
      this.setGlobalIsPost();
    }
    this.changeCheckboxStyle();
  },
  computed: {
    activeIcon(){
      return this.commonAttr.checkboxSelectedUrl
    },
    inactiveIcon(){
      return this.commonAttr.checkboxUrl
    },
    iconSize(){
      return getPxOVwByValue(this.commonAttr.fontSize);
    }
  },
  methods: {
    onChangeAttr() {
      if (!this.isH5Edit) {
        this.setGlobalIsPost();
      }
    },
    setGlobalIsPost(){
      let globalIsPost = {};
      let followUid = '';

      if(this.getItemControls && this.getItemControls[CONTROL_TYPES.wb_follow]) {
        let followControlData = this.getItemControls[CONTROL_TYPES.wb_follow]
        followUid = followControlData.data.follow_uid
      }
      let key = this.commonAttr.interfaceType + 'ClickObj'
      globalIsPost[key] = {}
      if(followUid) {
        globalIsPost.isFollowClickObj[followUid] = this.isChecked;
      } else {
        globalIsPost[this.commonAttr.interfaceType] = this.isChecked; //isPush isPushImg isFollow 
        globalIsPost[key][getCompIdByParam(this.commonAttr.relateCompId)] = this.isChecked;
      }

      this.$store.commit("updateGlobalPost", globalIsPost);
      
      window.setTimeout(() => {
        this.changeCheckboxStyle();
      }, 20)
    },
    changeCheckboxStyle(){
      if(!this.commonAttr.checkboxSelectedUrl){
        let checkboxStyle = this.$refs.checkbox.$el.getElementsByTagName("i")[0]
        checkboxStyle.style.border = "2px solid " + this.commonAttr.borderColor;
        checkboxStyle.style.fontSize = getPxOVwByValue(this.commonAttr.fontSize);
      }else{
        let checkboxStyle = this.$refs.checkbox.$el.getElementsByTagName("img")[0];
        if(this.commonAttr.text && this.commonAttr.text.length > 0){
          checkboxStyle.style.width = this.iconSize;
          checkboxStyle.style.height = this.iconSize;
        }
      }
    }
  },
};
</script>
<style lang="scss">
.wb-is-post-event {
  width: inherit;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;

  .van-checkbox {
    font-size: inherit;
    color: inherit;
    width: inherit;
    height: inherit;

    span {
      font-size: inherit;
      color: inherit;
    }
  }

  .img-icon{
    width: inherit;
    height: inherit;
  }
}
</style>